<template>
    <div id='tmpl'>
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in list">
                    <router-link v-bind="{to:'/movedetails/'+item.id}">
                        <img :src="item.images.small" class="moveimg">
                    </router-link>
                    <div>
                        <h5 style='color:#3BB5FF'>
                            <span>{{item.title}}</span>
                            <em style="color:red" >{{item.rating.average}}分</em>
                        </h5>
                        <h5 style="color:yellowgreen">类型:{{item.genres.join('、')}}</h5>
                    </div>
                </li>
            </ul>
        </div>
        <div class="paging">
            <button class="btone">上一页</button>
            <span>总共：10条记录,第1页</span>
            <button class="bttwo" @click="">下一页</button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: 0,
            list: []
        };
    },
    created() {

        this.getvideos()
    },
    methods: {
        getvideos: function () {
            var url = 'http://api.douban.com/v2/movie/top250';
            this.$http.jsonp(url).then(function (response) {
                var data = response.body;
                this.list = data.subjects;
            })
        }
    }
}
</script>
<style lang="css" scoped>
.list {}

.list ul {
    padding-left: 0px;
    margin: 0px;
}

.list li {
    float: left;
    list-style: none;
}

.moveimg {
    height: 100px;
}
.paging {
    width: 100%;
    height: 60px;
    line-height: 60px;
    position: relative;
}
.paging button {
    position: absolute;
    top: 0;
    height: 60px;
    width: 80px;
    border:0;
    outline: none;
    background: lightblue;
}
.paging .btone {
   left:0;
   
}
.paging .bttwo {
   right:0;
}
.paging span {
    display: block;
    text-align: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: 0 80px;
}
</style>